<script setup lang='ts'>
import { ref } from 'vue';
import Child from './components/Child.vue'

import Test from './components/test.vue'

import { Person } from './types/index'

const person:Person = {
  id:1,
  name:'harry',
  age:18
}
console.log(person);


const msg = ref('hello ts')

const car = ref('BMW')

const changeMsg = (value:string) => {
  msg.value = value
}

const changeCar = (value:string) => {
  car.value = value
}

// type User = {
//   name:string,
//   age:number,
//   sayHi:() => void
// }


// const obj = ref<User>({
//   name:'harry',
//   age:18,
//   sayHi:() => {
//     console.log('hi');
//   }
// })

// console.log(obj);

type ListItem = {
  id:number | string ,
  name:string,
  status:boolean
}


// const list= ref<ListItem[]>([
//   {id:1,name:'吃饭',status:false},
//   {id:2,name:'写代码',status:true}
// ])

const list = ref<ListItem[]>([])

list.value = [
  {id:1,name:'吃饭',status:false},
  {id:2,name:'写代码',status:true}
]

console.log(list);

// const list = ref([])

// list.value = 1


</script>
<template>
  <div>
    <Child :msg="msg" :car="car" @change-msg="changeMsg" @change-car="changeCar"/>
  </div>

  <Test></Test>

</template>
<style lang='less'>
 
</style>
